<template>
	<view class="my page-full">
		<image
			class="my-bg"
			src="/static/my/bg.png"
		></image>
		<view class="my-main flex flex-col">
			<view
				class="barTitle flex-row-center"
				:style="barTitleStyle"
			>
				个人中心
			</view>
			<image
				class="avatar"
				src="/static/my/avatar.png"
			></image>
			<view class="name">
				<!-- 张三 -->
				游客
			</view>
			<view class="cell">
				<view
					class="cell-item flex items-center"
					v-for="(item,index) in cellList"
					@click="onCellItem(item,index)"
				>
					<image
						class="cell-item-icon"
						:src="item.icon"
						mode="aspectFit"
					></image>
					<view class="flex-1">
						{{item.name}}
					</view>
					<image
						class="cell-item-arrow"
						src="/static/arrow.png"
					></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				barTitleStyle: "",
				cellList: [
					/* {
						icon: require("@/static/my/cell01.png"),
						name: "我的借阅",
						page: "/pages/list/list?title=我的借阅&type=borrow"
					}, */
					/* {
						icon: require("@/static/my/cell02.png"),
						name: "收藏书单",
						page: "/pages/list/list?title=收藏书单&type=collect"
					}, */
					{
						icon: require("@/static/my/cell03.png"),
						name: "微信绑定",
						type: "wxbind"
					},
					{
						icon: require("@/static/my/cell04.png"),
						name: "退出登入",
						type: "logout"
					},
				]
			}
		},
		methods: {
			onCellItem(cellItem, indexItem) {
				if (cellItem?.page) {
					uni.navigateTo({
						url: cellItem.page
					})
				}
			},
		},
		onLoad() {
			// #ifndef H5 || APP || MP-LARK
			let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
			// console.log('menuButtonInfo', menuButtonInfo);
			this.barTitleStyle = `height:${menuButtonInfo.height}px;margin-top:${menuButtonInfo.top}px;`
			// #endif
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: unset;
	}

	.my {
		position: relative;

		&-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 446rpx;
		}

		&-main {
			height: 100%;
			position: relative;
			z-index: 1;
			overflow: hidden;

			.barTitle {
				margin-top: 110rpx;
				font-weight: bold;
				color: #FFFFFF;

			}

			.avatar {
				display: block;
				margin: 30rpx auto 0;
				width: 156rpx;
				height: 156rpx;
			}

			.name {
				color: #FFFFFF;
				text-align: center;
			}

			.cell {
				flex: 1;
				margin: 30rpx 30rpx 100rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 0rpx 0rpx;

				&-item {
					height: 88rpx;
					font-size: 28rpx;
					color: #2E3144;
					padding-left: 20rpx;
					padding-right: 16rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #F1F1F1;

					&-icon {
						width: 40rpx;
						height: 40rpx;
						margin-right: 16rpx;
					}

					&-arrow {
						width: 14rpx;
						height: 24rpx;
					}
				}
			}
		}



	}
</style>